<!-- 模板组件 -->
<template>
  <div>
    <div class="app-container">

      <el-card>
        <div>
          <!-- 搜索功能 -->
          <el-input v-model="input" placeholder="请输入内容" class="input-with-select" clearable>
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <!-- 添加按钮能 -->
          <el-button type="primary">添加用户</el-button>
        </div>
        <!-- 表格 -->
        <el-table
          class="el-table"
          :data="tableData"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="number"
            label="#"
            width="50"
          />
          <el-table-column
            prop="name"
            label="姓名"
          />
          <el-table-column
            prop="Telephone"
            label="电话"
          />
          <el-table-column
            prop="role"
            label="角色"
          />
          <el-table-column
            prop="state"
            label="状态"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="value"
                active-color="#409eff"
                inactive-color="#dcdfe6"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" />
              <el-button type="danger" icon="el-icon-delete" size="mini" />
              <el-button type="warning" icon="el-icon-setting" size="mini" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 底部页数 -->
        <template>
          <el-pagination
            :current-page="pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </template>
      </el-card>
    </div>
  </div>
</template>
<!-- //模板组件 -->
<!-- 运行脚本 -->
<script>
import { userinfolistApi } from '@/api/user'
export default {
  name: 'Users',
  // 注册组件名称
  components: {},
  // 父组件传值声明接收
  props: {},
  // 定义属性值
  data() {
    return {
      input: '', // 搜索功能
      value: true, // 状态
      tableData: [{
        number: '1',
        name: '毛慧玲',
        Telephone: '18815012151',
        role: '财务',
        operation: ''
      }, {
        number: '1',
        name: '毛慧玲',
        Telephone: '18815012151',
        role: '财务',
        operation: ''
      }, {
        number: '1',
        name: '毛慧玲',
        Telephone: '18815012151',
        role: '财务',
        operation: ''
      }, {
        number: '1',
        name: '毛慧玲',
        Telephone: '18815012151',
        role: '财务',
        operation: ''
      }],
      pagenum: 1, // 当前页
      pagesize: 1, // 每页显示几条
      totalCount: 12// 总条数
    }
  },
  // 计算属性定义方法处
  computed: {},
  // 监视属性定义方法处
  watch: {},
  // 页面创建之前 发起axios请求处
  created() {
    this.userinfolist()
    // this.$store.dispatch('user/userinfolist', { pagenum: this.pagenum, pagesize: this.pagesize })
  },

  // 挂载完成之前
  mounted() {},
  // 定义方法处
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.userinfolist()
    },
    async userinfolist() {
      console.log(123)
      const res = await userinfolistApi({
        pagenum: this.pagenum,
        pagesize: this.pagesize
      })
      console.log(res)
    }
  }
}
</script>
<!-- //运行脚本 -->
<!-- 样式开始 -->
<style scoped lang='scss'>
.input-with-select{
  width: 350px;
  margin-right: 30px;
}
.el-table{
margin-top:15px ;
margin-bottom:20px ;
}
.menu{
  margin:0 10px;
}

</style>
<!-- //样式开始 -->
